/*********************** 样式 *************************/
.Banner{width:100%;height:500px;position:relative;}

/* 动画区域 */
.Banner .PicList{width:100%;height:100%;position:relative;overflow:hidden;transform-style:preserve-3d; perspective:1000px;}
.Banner .PicList div{position:absolute;display:none;width:100%;height:100%;background-size:cover;background-position:center;}
.Banner .PicList div a{display: block; width:100%;height:100%;}
.Banner .PicList div.show{display: block;z-index:1;}

/* 列表按钮区域 */
.Banner .BtnList{bottom:20px; width:100%; position: absolute; z-index:1;  text-align: center; padding:0; list-style: none;}
.Banner .BtnList li{width:80px; height:40px; opacity: 0.8; border:3px white solid; margin:0px 5px; display: inline-block;  background-size:cover;background-position:center; transition: all .3s ease-in-out;}
.Banner .BtnList li:hover{position: relative; transform: scale(1.1); z-index:2; cursor: pointer;}
.Banner .BtnList li.act{opacity: 1; transform: scale(1.2);margin:0px 20px;}

/* 箭头按钮区域 */
.Banner .BtnArrow{width:100%; position: absolute; top:50%; margin-top:-40px; z-index:1;}
.Banner .BtnArrow span{display:block; position: absolute; width:50px; height:80px; background-color: black; opacity: 0.1; cursor: pointer; color:white; font-family: "宋体"; font-size: 70px; text-align: center; transition: all .3s ease-in-out;}
.Banner:hover .BtnArrow span{opacity: 0.4;}
.Banner .BtnArrow span:hover{opacity: 0.7;}
.Banner .BtnArrow span.BtnLeft{ left:10px; }
.Banner .BtnArrow span.BtnRight{ right:10px; }

/* 动画效果-不要改动 */
@keyframes eadeIn{from{opacity:0}to{opacity:1}}@keyframes eadeOut{from{opacity:1}to{opacity:0}}@keyframes zoomBigIn{from{transform:scale(0.3);opacity:0}to{transform:scale(1);opacity:1}}@keyframes zoomBigOut{from{transform:scale(1);opacity:1}to{transform:scale(2);opacity:0}}@keyframes zoomSmallIn{from{transform:scale(2);opacity:0}to{transform:scale(1);opacity:1}}@keyframes zoomSmallOut{from{transform:scale(1);opacity:1}to{transform:scale(0.5);opacity:0}}@keyframes moveLeftIn{from{right:-100%}to{right:0}}@keyframes moveLeftOut{from{left:0}to{left:-100%}}@keyframes moveRightIn{from{left:-100%}to{left:0}}@keyframes moveRightOut{from{right:0}to{right:-100%}}@keyframes moveUpIn{from{bottom:-100%}to{bottom:0}}@keyframes moveUpOut{from{top:0}to{top:-100%}}@keyframes moveDownIn{from{top:-100%}to{top:0}}@keyframes moveDownOut{from{bottom:0}to{bottom:-100%}}@keyframes slideLeftIn{from{right:-100%;opacity:0}to{right:0;opacity:1}}@keyframes slideLeftOut{from{left:0;opacity:1}to{left:0;opacity:0}}@keyframes slideRightIn{from{left:-100%;opacity:0}to{left:0;opacity:1}}@keyframes slideRightOut{from{right:0;opacity:1}to{right:0;opacity:0}}@keyframes slideUpIn{from{bottom:-100%;opacity:0}to{bottom:0;opacity:1}}@keyframes slideUpOut{from{top:0;opacity:1}to{top:0;opacity:0}}@keyframes slideDownIn{from{top:-100%;opacity:0}to{top:0;opacity:1}}@keyframes slideDownOut{from{bottom:0;opacity:1}to{bottom:0;opacity:0}}@keyframes FlipXIn{from{transform:rotateX(-180deg);z-index:1}to{transform:rotateX(0deg);z-index:2}}@keyframes FlipXOut{from{transform:rotateX(0deg);z-index:2}to{transform:rotateX(180deg);z-index:1}}@keyframes FlipYIn{from{transform:rotateY(-180deg);z-index:1}to{transform:rotateY(0deg);z-index:2}}@keyframes FlipYOut{from{transform:rotateY(0deg);z-index:2}to{transform:rotateY(180deg);z-index:1}}@keyframes FlipLeftIn{from{transform:rotateY(40deg) translateZ(1000px);opacity:0;z-index:1}to{transform:rotateY(0deg);opacity:1;z-index:2}}@keyframes FlipLeftOut{from{opacity:1}to{opacity:0}}@keyframes FlipRightIn{from{transform:rotateY(-40deg) translateZ(1000px);opacity:0;z-index:1}to{transform:rotateY(0deg);opacity:1;z-index:2}}@keyframes FlipRightOut{from{opacity:1}to{opacity:0}}@keyframes FlipUpIn{from{transform:rotateX(-90deg) translateZ(400px);z-index:2}to{transform:rotateX(0deg);z-index:2}}@keyframes FlipUpOut{from{opacity:1;z-index:1}to{opacity:0;z-index:1}}@keyframes FlipDownIn{from{transform:rotateX(90deg) translateZ(400px);z-index:2}to{transform:rotateX(0deg);z-index:2}}@keyframes FlipDownOut{from{opacity:1;z-index:1}to{opacity:0;z-index:1}}@keyframes RollLeftIn{from{transform:rotateY(90deg);z-index:1}to{transform:rotateY(0deg);z-index:1}}@keyframes RollLeftOut{from{transform:rotateY(0deg);z-index:2}to{transform:rotateY(-90deg);z-index:2}}@keyframes RollRightIn{from{transform:rotateY(-90deg);z-index:2}to{transform:rotateY(0deg);z-index:2}}@keyframes RollRightOut{from{transform:rotateY(0deg);z-index:1}to{transform:rotateY(90deg);z-index:1}}@keyframes RollUpIn{from{transform:rotateX(-90deg);z-index:1}to{transform:rotateX(0deg);z-index:1}}@keyframes RollUpOut{from{transform:rotateX(0deg);z-index:2}to{transform:rotateX(90deg);z-index:2}}@keyframes RollDownIn{from{transform:rotateX(90deg);z-index:2}to{transform:rotateX(0deg);z-index:2}}@keyframes RollDownOut{from{transform:rotateX(0deg);z-index:1}to{transform:rotateX(-90deg);z-index:1}}